<template>
	<view class="center">
		<view class="user-top">
			<view class="top-up" :style="{'margin-top':StatusBarHeight+'px'}">
				<view class="up-tu">
					<uni-icons type="gear" class="up-icon" size="25" @click="to"></uni-icons>
				</view>
			</view>
			<view class="top-down">
				<image class="down-image" :src="Info.avatar" mode="" @click="onLogin"></image>
				<view class="down-word">
					<text class="word-Btext">{{Info.nickName ||'未登录'}}</text>
					<!-- <text class="word-Gtext">{{Mobile}}</text> -->
				</view>
			</view>
		</view>
		<!-- 关注、粉丝、获赞数量 -->
		<view class="num-operate">
			<view class="user-dom" @click="goInformation('/pages/follow/follow')">
				<view class="domain-sty">
					{{formDate.followsNum || 0}}
				</view>
				<view class="domain-font">
					关注
				</view>
			</view>
			<view class="user-dom" @click="goInformation('/pages/fans/fans')">
				<view class="domain-sty">
					{{formDate.fansNum || 0}}
				</view>
				<view class="domain-font">
					粉丝
				</view>
			</view>
			<view class="user-dom">
				<view class="domain-sty">
					{{formDate.useFavoriteNum || 0}}
				</view>
				<view class="domain-font">
					获赞
				</view>
			</view>
		</view>

		<!-- 帖子、评论、点赞 -->
		<view class="information-wrap">
			<view class="information-item" v-for="(item, index) in informationList" :key="index"
				@click="goInformation(item.url)">
				<view class="II-wrap">
					<image :src="item.img" mode="widthFix" class="II-img"></image>
				</view>

				<view class="II-text">
					{{item.title}}
				</view>
			</view>
		</view>

		<!-- 收益、余额 -->
		<view class="income-wrap">
			<view class="income-item">
				<view class="iw-num">
					{{formDate.creditedPrize/100 || 0}}
				</view>

				<view class="iw-text">
					已结算收益
				</view>

				<view class="iw-btn" @click="goNavi('收益')">
					收益明细
				</view>
			</view>

			<view class="divider">
			</view>

			<view class="income-item">
				<view class="iw-num">
					{{formDate.balance/100 || 0 }}
				</view>

				<view class="iw-text">
					账户余额
				</view>

				<view class="iw-btn" @click="goNavi('提现')">
					去提现
				</view>
			</view>

		</view>

		<view class="user-list">
			<view class="li-item" v-for="item, index in menuList" :key="index" @click="onGo(item.url, index)">
				<view class="item-wrap">
					<image :src="item.img" mode="widthFix" class="item-img"></image>
				</view>
				<view class="item-title">
					<text class="left-text">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<!-- 	<view class="user-last">
			<text class="last-Btext" @click="onOut">退出登录</text>
		</view> -->

		<view class="user-popup" v-show="show" @click="hide">
			<view class="popup-box">
				<image class="box-image" src="../../static/user/head.png" mode=""></image>
				<text class="box-p">{{ phone }}</text>
				<view class="box-btn">
					<text class="btn-Nbtn" @click="hide">取消</text>

					<!-- #ifdef APP-PLUS -->
					<text class="btn-Obtn" @click="openAuth('CALL_PHONE')">拨打</text>
					<!-- #endif  -->

					<!-- #ifndef APP-PLUS -->
					<text class="btn-Obtn" @click="callPhone">拨打</text>
					<!-- #endif  -->
				</view>
			</view>
		</view>

		<permission-popup ref="authpup" type="top" @changeAuth="changeAuth" :isNativeHead="false"
			:permissionID="permissionID"></permission-popup>

		<!--导航栏 -->
		<tabBar :selectedIndex="selectedTabIndex"></tabBar>
	</view>
</template>
<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		login,
		getStoreId,
		addCart,
		userDetail
	} from "@/api/apis.js";

	import {
		getStatusBarHeight,
	} from "@/utils/system.js"

	export default {
		components: {
			permissionPopup
		},
		data() {
			return {
				StatusBarHeight: "",
				show: false,
				Mobile: "",
				permissionID: "",
				phone: '13345012794', //客服，商家电话 
				informationList: [{
					title: "帖子",
					img: "/static/user/Post.png",
					url: '/pages/minePost/minePost'
				}, {
					title: "评论",
					img: "/static/user/comment.png",
					url: '/pages/mineComm/mineComm'
				}, {
					title: "点赞",
					img: "/static/user/dianzhan.png",
					url: '/pages/mineLikes/mineLikes'
				}],

				menuList: [{
						title: "我的订单",
						img: "/static/user/order.png"
					}, {
						title: "收货地址",
						img: "/static/user/address.png"
					},
					{
						title: "我的邀请",
						img: "/static/user/Inviter.png"
					},
					{
						title: "邀请好友",
						img: "/static/user/InviteFriends.png"
					},
					{
						title: "关于我们",
						img: "/static/user/about.png"
					},
					{
						title: "联系客服",
						img: "/static/user/custom.png"
					},
				],

				id: 2,
				customerId: 5,
				user: uni.getStorageSync('Info') || [],
				formDate: {},
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
			selectedTabIndex() {
				return uni.getStorageSync('identify') === 'tom' ? 2 : 3;
			}
		},
		onTabItemTap(item) {
			console.log(item, 1234)
			// return false
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			console.log(this.Info);
			this.onSearch()
		},
		onLoad() {
			this.StatusBarHeight = getStatusBarHeight()

			let tel = this.Info.mobile;
			this.Mobile = tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			// console.log(result);

		},
		methods: {
			...mapMutations("userInfo", ["setToken", 'setUserInfo', 'setStoreId', 'setRemove']),
			goInformation(url) {
				uni.navigateTo({
					url: url
				})
			},
			onSearch() {
				userDetail(this.Info.id).then(res => {
					console.log(res);
					this.formDate = res.result
				})
			},


			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
						permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.callPhone()
				}
			},


			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
				this.callPhone() //调用通话功能
			},

			callPhone() {
				const phoneNumber = this.phone;
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码  
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(error) {
						console.error('拨打电话失败：', error);
						// 可能是用户拒绝了电话权限或者号码格式不正确等  
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});

			},

			goNavi(type) {
				if (type == '提现') {
					uni.navigateTo({
						url: "/pages/reflect/reflect"
					})
				} else {
					uni.navigateTo({
						url: "/pages/incomeDetail/incomeDetail"
					})
				}
			},
			onGo(url, index) {
				console.log(index);
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/orders/orders"
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/address/address"
					})
				}
				if (index == 2) {
					uni.navigateTo({
						url: "/pages/invitations/invitations"
					})
				}
				if (index == 3) {
					uni.navigateTo({
						url: "/pages/friends/friends"
					})
				}

				if (index == 4) {
					uni.navigateTo({
						url: "/pages/ours/ours"
					})

					// uni.navigateTo({
					// 	url: "/pages/Invitation/Invitation"
					// })

				}
				if (index == 5) {
					this.show = true
					// getPhone(28).then(res => {
					// 	console.log(res);
					// 	this.phone = res.result
					// })
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			to() {
				uni.navigateTo({
					url: '/pages/supports/supports'
				})
			},
			hide() {
				this.show = false

			},

			onLogin() {
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// })
			},

			// 清除
			// onOut() {
			// 	uni.showModal({
			// 		title: '提示：',
			// 		content: '请确认是否要退出登录？',
			// 		cancelColor: "#aaaaaa",
			// 		confirmColor: "#FE2C55",
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				console.log('确定，退出登录');
			// 				this.setRemove() //清空缓存信息
			// 				uni.switchTab({
			// 					url: '/pages/index/index'
			// 				})

			// 			} else if (res.cancel) {
			// 				// console.log('取消');
			// 				//TODO
			// 				return
			// 			}
			// 		}
			// 	});
			// },
		}
	}
</script>

<style lang="scss" scoped>
	// .icon {
	// 	font-size: 20px;
	// 	color: #fff;
	// }
	.center {
		width: 100%;
		height: 100vh;
		// min-height: 92.5vh;
		// background: linear-gradient(to bottom, #ffe9ee, #f7f7f7 40%);
		background: url("../../static/user/bgpic.png") no-repeat top center;
		overflow-y: auto;

		//顶部
		.user-top {
			padding: 0 40rpx;

			.top-up {
				height: 96rpx;
				display: flex;
				justify-content: end;
				justify-content: flex-end;

				align-items: center;

				.up-tu {
					width: 60rpx;
					height: 60rpx;
					background-color: #fff;
					border-radius: 50%;
					line-height: 60rpx;
					text-align: center;

					.up-icon {
						text-align: center;
					}
				}
			}

			.top-down {
				display: flex;
				align-items: center;

				.down-image {
					width: 144rpx;
					height: 144rpx;
					background-color: #f3f3f3;
					border: 5rpx solid #fff;
					border-radius: 50%;
					margin-right: 30rpx;
				}

				.down-word {
					.word-Btext {
						display: block;
						font-size: 35rpx;
						font-weight: 600;
					}

					.word-Gtext {
						margin-top: 10rpx;
						display: block;
						font-size: 22rpx;
					}
				}
			}
		}

		// 关注、粉丝、获赞数量
		.num-operate {
			display: flex;
			height: 114rpx;
			width: 100%;
			justify-content: space-between;
			padding: 0 158rpx 0 208rpx;

			.domain-sty {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #232323;
				line-height: 48rpx;
				font-style: normal;
				text-transform: none;
				text-align: center;
			}

			.domain-font {
				margin-top: 4rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4F5D84;
				line-height: 24rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		// 帖子、评论、点赞
		.information-wrap {
			margin: 0 auto;
			width: 686rpx;
			box-sizing: border-box;
			padding: 32rpx 64rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			justify-content: space-between;

			.information-item {
				// margin-right: 100rpx;

				.II-wrap {
					height: 64rpx;
					width: 64rpx;

					.II-img {
						height: 100%;
						width: 100%;
					}
				}

				.II-text {
					width: 64rpx;
					margin-top: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #262626;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					text-align: center;
				}
			}
		}

		// 收益、余额
		.income-wrap {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 686rpx;
			box-sizing: border-box;
			padding: 40rpx 0;
			height: 220rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;

			.income-item {
				width: 342rpx;
				text-align: center;

				.iw-num {
					font-family: D-DIN-PRO, D-DIN-PRO;
					font-weight: 600;
					font-size: 44rpx;
					color: #282828;
					line-height: 44rpx;
					font-style: normal;
					text-transform: none;
				}

				.iw-text {
					margin-top: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #8E8E8E;
					line-height: 40rpx;
					font-style: normal;
					text-transform: none;
				}

				.iw-btn {
					margin: 0 auto;
					margin-top: 10rpx;
					width: 124rpx;
					height: 44rpx;
					background: #FEE4C1;
					border-radius: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					font-weight: 400;
					font-size: 24rpx;
					color: #865A29;
				}
			}

			.divider {
				width: 2rpx;
				height: 140rpx;
				background: #D9D9D9;
			}
		}

		.user-list {
			padding: 36rpx 0rpx 12rpx 0rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			width: 686rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.li-item {
				width: 171rpx;
				text-align: center;
				margin-bottom: 36rpx;

				.item-wrap {
					margin: 0 auto;
					width: 80rpx;
					height: 80rpx;
					background: rgba(217, 217, 217, 0.3);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					.item-img {
						height: 40rpx;
						width: 40rpx;

					}
				}

				.item-title {
					margin-top: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #262626;
					line-height: 36rpx;
					font-style: normal;
					text-transform: none;
				}

			}

			// .li-list {
			// 	display: flex;
			// 	justify-content: space-between;
			// 	align-items: center;
			// 	margin: 25rpx 30rpx;
			// 	background-color: #fff;
			// 	border-radius: 20rpx;
			// 	padding: 25rpx 30rpx;

			// 	.list-left {
			// 		display: flex;
			// 		align-items: center;
			// 		font-size: 25rpx;

			// 		.left-text {
			// 			font-size: 30rpx;
			// 			margin-left: 13rpx;
			// 			margin-top: -2rpx;
			// 		}
			// 	}

			// 	.list-right {}
			// }
		}

		// .user-last {
		// 	margin-top: 60rpx;

		// 	.last-Btext {
		// 		text-align: center;
		// 		display: block;
		// 		color: #f34129;
		// 		font-size: 30rpx;
		// 		// font-weight: 550;
		// 	}
		// }

	}



	.user-popup {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		align-items: center;

		.popup-box {
			margin: 0 auto;
			background-color: #fff;
			height: 350rpx;
			width: 580rpx;
			border-radius: 20rpx;
			text-align: center;

			.box-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #ccc;
				margin-top: -75rpx;
			}

			.box-p {
				display: block;
				font-size: 35rpx;
				margin-top: 50rpx;
			}

			.box-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 50rpx 40rpx 30rpx 40rpx;

				.btn-Nbtn {
					display: block;
					height: 84rpx;
					width: 240rpx;
					border: 2rpx solid #888888;
					border-radius: 15rpx;
					line-height: 84rpx;
					color: #888888;
				}

				.btn-Obtn {
					display: block;
					height: 84rpx;
					width: 240rpx;
					background: linear-gradient(to right, #ff2c28, #fd6e2b);
					border-radius: 15rpx;
					line-height: 84rpx;
					color: #fff;
				}
			}
		}
	}
</style>